<template>
	<div class="padding-container preview-wrap" v-loading.fullscreen.lock="fullscreenLoading">
		<div class="title-part">
      <el-button size="mini" :loading="loading" @click="checkConnect()" type="primary" class="pull-right" v-show="!show && showBtn">{{ $root.lang.control.device.detail.checkConnect }}</el-button>
      <el-button size="mini" :loading="loading" @click="restartDevice()" type="primary" class="lang-select pull-right" v-show="!show && showBtn">{{ $root.lang.control.device.detail.restartDevice }}</el-button>
      <div class="pull-right" style="text-align: right;">
        <el-button size="mini" :loading="loading" @click="createCrt()" type="primary" v-show="!show && showBtn">{{ $root.lang.control.device.detail.createCrt }}</el-button>
      </div>
      <el-button size="mini" :loading="loading" @click="systemparameter()" type="primary" class="lang-select pull-right" v-show="!show && showBtn">设备系统参数查询</el-button>
      <el-button size="mini" :loading="loading" @click="refresh()" type="primary" class="lang-select pull-right" v-show="!show">{{ $root.lang.control.device.detail.refresh }}</el-button>
		</div>
		<div class="data-preview">
	    <el-form class="tab-pan form-inline" size="small" label-position="right" :label-width="formLabelWidth">
        <el-form-item :label="getLabel('deviceName')">
          <span>{{ baseData.deviceName | dataFormat }}</span>
        </el-form-item>
        <el-form-item label="IMEI：">
          <span>{{ baseData.imei | dataFormat }}</span>
        </el-form-item>
        <el-form-item :label="getLabel('creTime')">
          <span>{{ baseData.creTime | dateFormat }}</span>
        </el-form-item>
        <el-form-item :label="getLabel('lastHeartTime')">
          <span>{{ baseData.lastHeartTime | dateFormat }}</span>
        </el-form-item>
      </el-form>
      <el-form class="tab-pan form-inline" size="small" label-position="right" :label-width="formLabelWidth">
        <el-form-item :label="getLabel('group')" v-show="show">
          <span>{{ baseData.groupName | dataFormat }}</span>
        </el-form-item>
        <el-form-item :label="getLabel('deviceType')">
          <span v-if="baseData.deviceType != null">{{ deviceTypeList.find(item => item.typeCode === baseData.deviceType).typeName }}</span>
          <span v-else-if="baseData.deviceType == null">{{ '--' }}</span>
        </el-form-item>
        <el-form-item :label="getLabel('activeState')">
          <span>{{ setState.activeState, baseData.isActivation, setState.activeState["-1"].title | matchValue }}</span>
        </el-form-item>
        <el-form-item :label="getLabel('connectState')">
          <span>{{ setState.connectState, baseData.isConnection, setState.connectState["0"].title | matchValue }}</span>
        </el-form-item>
        <el-form-item :label="getLabel('bindState')">
          <span>{{ setState.bindState, baseData.isBinding, '--' | matchValue }}</span>
        </el-form-item>
      </el-form>
		</div>
		<el-tabs type="border-card">
		  <el-tab-pane :label="$root.lang.control.device.detail.appInfo">
				<App :deviceId="id + ''" :baseData="baseData" />
		  </el-tab-pane>
		  <el-tab-pane :label="$root.lang.control.device.detail.logList">
				<Log :sid="baseData.inventoryId + ''" :deviceId="id + ''"/>
		  </el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import '@/options/baseState'
import '@/options/deviceState'
import App from './app/app'
import Log from './log/log'
import { uuid } from 'vue-uuid'
export default {
	name: 'DeviceDetail',
	components:{
		App, Log
	},
	data() {
		return {
			id: null,
			fullscreenLoading: true,
			baseData: {},
      loading: false,
      showEdit: false,
			formLabelWidth: '120px',
      setState:{},
      codeData: {},
      fileUrl: '',
      show: false,
      showBtn: true, 
      deviceTypeList: []
		}
	},
	methods: {
		getLabel(name) {
      return this.$root.lang.control.device.detail[name]+'：'
    },
    createCrt() {
      this.$confirm(this.$root.lang.confirm.createCrt, this.$root.lang.confirm.tips, {
        confirmButtonText: this.$root.lang.confirm.confirm,
        cancelButtonText: this.$root.lang.confirm.cancel,
        type: 'warning'
      }).then(() => {
        this.request({
          url: '/device/cert?id=' + this.id,
          method: 'get',
          responseType: "blob"
        }).then(response => {
          // 得到请求到的数据后，对数据进行处理
          // 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
          let blob = new Blob([response.data], {type: response.data.type});
          // 创建一个a标签
          const link = document.createElement('a')
          // 设置a标签的下载属性
          link.download = uuid.v1() + '.crt';
          // 将a标签设置为隐藏
          link.style.display = 'none';
          // 把之前处理好的地址赋给a标签的href
          link.href = URL.createObjectURL(blob);
          // 将a标签添加到body中
          document.body.appendChild(link);
          // 执行a标签的点击方法
          link.click();
          // 下载完成释放URL对象
          URL.revokeObjectURL(link.href)
          // 移除a标签
          document.body.removeChild(link)
        }).catch(error => {
          this.$message({
            message: error.errmsg,
            type: 'error',
            duration: 3 * 1000
          })
        })
      }).catch(() => {})
    },
    restartDevice() {
      if(!this.checkState()) {
        return
      }
      this.$confirm(this.$root.lang.confirm.restartDevice, this.$root.lang.confirm.tips, {
        confirmButtonText: this.$root.lang.confirm.restartImmediately,
        cancelButtonText: this.$root.lang.confirm.noRestart,
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: this.$root.lang.confirm.process,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        let list = []
        list.push(parseInt(this.id))
        this.request({
          url: '/device/restart',
          method: 'post',
          data: list
        }).then(response => {
          loading.close()
          this.$message({
            message: this.$root.lang.control.device.detail.operationTip,
            type: 'success',
            duration: 3 * 1000
          })
        }).catch(error => {
          loading.close()
          this.$message({
            message: error.errmsg,
            type: 'error',
            duration: 3 * 1000
          })
        })
      }).catch(() => {})
    },
    systemparameter(){
      console.log(this.baseData.imei);
      this.$router.push({ name:'systemparameter', params:{
        id: this.id,
        imei: this.baseData.imei
      }})
    },
    checkConnect() {
      // if(!this.checkState()) {
      //   return
      // }
      this.$confirm(this.$root.lang.confirm.checkConnect, this.$root.lang.confirm.tips, {
        confirmButtonText: this.$root.lang.confirm.checkImmediately,
        cancelButtonText: this.$root.lang.confirm.noCheck,
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: this.$root.lang.confirm.process,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        let list = []
        list.push(parseInt(this.id))
        this.request({
          url: '/device/check/connection',
          method: 'post',
          data: list
        }).then(response => {
          loading.close()
          this.$message({
            message: this.$root.lang.control.device.detail.operationTip,
            type: 'success',
            duration: 3 * 1000
          })
        }).catch(error => {
          loading.close()
          this.$message({
            message: error.errmsg,
            type: 'error',
            duration: 3 * 1000
          })
        })
      }).catch(() => {})
    },
    refresh() {
      this.getDetail()
    },
    checkState() {
      if(this.baseData.isActivation != 3) {
        this.$message({
          message: this.$root.lang.control.device.detail.notActiveTip,
          type: 'error',
          duration: 3 * 1000
        })
        return false
      } else if(this.baseData.isConnection != 1) {
        this.$message({
          message: this.$root.lang.control.device.detail.notConnectTip,
          type: 'error',
          duration: 3 * 1000
        })
        return false
      } else if(this.baseData.isBinding != 2) {
        this.$message({
          message: this.$root.lang.control.device.detail.notBindTip,
          type: 'error',
          duration: 3 * 1000
        })
        return false
      } else {
        return true
      }
    },
    getReceive(data) {
      this[data.key] = data.value
    },
    getDetail() {
      this.fullscreenLoading = true
      let param = {
        id: this.id
      }
      this.request({
        url: '/device/page',
        method: 'post',
        data: this.$root.optionProcess(param)
      }).then(response => {
        this.baseData = response.rows[0]
        this.fullscreenLoading = false
      }).catch(error => {
        this.fullscreenLoading = false
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
    checkLang() {
      let langType = this.$root.getStorage('lang')
      if(langType == 'en') {
        this.setState = enDeviceConfigData
      } else {
        this.setState = deviceConfigData
      }
    },
    getDeviceType() {
      this.request({
        url: '/device/type/list',
        method: 'post',
        data: this.$root.optionProcess({
          delFlag: 0
        })
      }).then(response => {
        this.deviceTypeList = response.result
      }).catch(error => {
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
	},
	created() {
		if(this.$root.langType == 'en') {
      this.formLabelWidth = '160px'
    }
    this.id = this.$route.params.id
    if(this.Cookies.get('T') == '2') {
			this.show = true
      if(this.Cookies.get('O') == '1') {
        this.showBtn = false
      }
		} 
    this.checkLang()
    this.getDetail()
    this.getDeviceType()
	}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.padding-container {
		text-align: left;
		.title-part {
			text-align: left;
			padding-bottom:20px;
			font-size:18px;
      .paper-notice {
        margin-top: 6px;
        font-size: 12px;
      }
		}
    .lang-select {
      margin-right: 10px;
      cursor: pointer;
    }
		// .el-button {
		// 	margin-left:40px;
		// }
		.form-inline {
			display: inline-block;
			vertical-align: top;
			min-width:300px;
		}
		.el-form-item__label {
			width:130px !important;
		}
	}
</style>